<template>
	<view :class="[primarySize()]">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="container">
			<image class="m-backdrop" src="/static/public/Back.png" mode="widthFix"></image>
			<view class="pr login-wrap">
				<view class="title">登录</view>
				<view class="login-box mb40">
					<view class="input-box flex-box">
						<image class="mr30" src="/static/public/icon_phone.png" mode="aspectFill"></image>
						<input class="flex-grow-1 fs28" v-model="mobile" placeholder="请输入手机号" />
						<view class="col-red fs28 ptb10" @click="getCode()">{{codeText}}</view>
					</view>
					<view class="input-box flex-box">
						<image class="mr30" src="@/static/public/icon_code.png" mode="aspectFill"></image>
						<input class="flex-grow-1 fs28" v-model="code" placeholder="请输入验证码" />
					</view>
					<view class="btn-login" @click="mobilelogin()">登 录</view>
					<view class="fs26 col-6 tc">未注册用户，登录即创建账户</view>
				</view>
				<view class="foot-row flex-box flex-center fs26 col-6">
					<image @click="toggleAgree" :src="iconPath(isAgree?'choose_sc.png':'choose_uc.png')"
						mode="aspectFill"></image>
					<view>登录即同意</view>
					<!-- "agreement('user_agreement')" -->
					<view class="col-red" @click="agreePopOpen('user_agreement')">《用户协议》</view>
					<view>和</view>
					<view class="col-red" @click="agreePopOpen('privacy_agreement')">《隐私注册》</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="container">
			<view class="authorize_content">
				<button class="header" hover-class="none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="avatar?avatar:'/static/public/avatar.png'" mode="aspectFill" class="head"></image>
					<view class="tips flex-box flex-col flex-center">
						<view>上传</view>
						<view>头像</view>
					</view>
				</button>
				<!-- <view class="title">请确认以下授权信息</view> -->
				<view class="input-box flex-box mt50">
					<image class="mr30" :src="iconPath('choose_uc.png')" mode="widthFix"></image>
					<view class="fs28">用户昵称</view>
					<input class="flex-grow-1 pl30 tr fs28" type="nickname" @nicknamereview="onNickname"
						v-model="nickname" placeholder="请输入昵称" />

				</view>
				<view class="info">·获取您的信息(手机号等)</view>
				<button hover-class="none" v-if="avatar && nickname" open-type="getPhoneNumber" class="btn1"
					@getphonenumber="getPhoneNumber" style="background-color: var(--primary);">授权登录</button>
				<button hover-class="none" v-else class="btn1" @click="onAuthTips()"
					style="background-color: var(--primary);">授权登录</button>
				<button hover-class="none" class="btn2" @click="closeLogin">暂不登录</button>
				<!-- <view class="user-rules">
					<u-checkbox v-model="agree" active-color="#0896e0">已阅读并同意以下条款</u-checkbox>
					<view class="rules">
						<text class="primary-color" @tap="goService">《用户服务协议》</text>
						<text>和</text>
						<text class="primary-color" @tap="goPrivacy">《用户隐私政策》</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- #endif -->

		<!-- 弹窗 -->
		<!-- <uni-popup ref="agreePopup" type="center" :show="false">
			<view class="agreePop tc" catchtouchmove="true">
				<view class="fs28 col-black content">
					<rich-text :nodes="article.content"></rich-text>
				</view>
				<view class="foot-wrap flex-box m-hairline--top">
					<view @click="agreePopClose" class="btn flex-grow-1 col-6 m-hairline--right">取消</view>
					<view class="btn flex-grow-1 col-red" @click="agreePopClose">确定</view>
				</view>
			</view>
		</uni-popup> -->

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				avatar: '',
				nickname: '',
				mobile: '',
				disabledCode: false,
				codeText: '验证码',
				code: '',
				isAgree: true,
				article: {
					name: '',
					content: ''
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {

			let page = this;
			//#ifdef MP-WEIXIN
			this.$core.wxLogin(function(data) {
				console.log(data);
				getApp().globalData.userinfo = data;
				page.$chatIM.connectSocket();
				uni.$emit(app.globalData.Events.UserLogin, data);
				uni.showToast({
					title: '登录成功',
				});
				uni.navigateBack({});
			});
			// #endif
		},
		methods: {
			onChooseAvatar(e) {
				var that = this
				//#ifdef MP-WEIXIN
				that.$core.uploadFile({
					filePath: e.detail.avatarUrl,
					success: (ret, response) => {
						that.avatar = ret.data.url;
					}
				});
				//#endif
			},
			onNickname(e) {
				if (!e.detail.pass) {
					uni.showToast({
						title: '昵称不合法',
						icon: 'none'
					})
					this.nickname = '';
				}
			},
			closeLogin() {
				uni.navigateBack({
					delta: 1
				})
			},
			agreePopOpen(type) {
				this.$core.post({
					url: 'xilujob.common/singlepage',
					data: {},
					success: (ret) => {
						this.article = ret.data;

						this.$refs.agreePopup.open();
					}
				});
			},
			agreePopClose() {
				this.$refs.agreePopup.close();
			},
			toggleAgree() {
				this.isAgree = !this.isAgree;
			},

			//获取验证码
			getCode() {
				if (this.disabledCode) return false;
				let mobile = this.mobile;
				if (!mobile) {
					uni.showToast({
						title: '手机号不得为空',
						icon: 'none'
					})
					return false
				}
				this.$core.post({
					url: 'sms/send',
					data: {
						mobile: mobile,
						event: 'mobilelogin'
					},
					success: (ret) => {
						this.timeCut();
					}
				});
			},
			// 倒计时
			timeCut() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + 's';
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + 's';
					if (this.codeText < 0 + 's') {
						this.disabledCode = false;
						this.codeText = '验证码';
					}
				}, 1000);
			},
			onAuthTips() {
				uni.showToast({
					title: '请先完善昵称头像',
					icon: 'none'
				})
			},
			mobilelogin() {
				let that = this;
				if (!that.isAgree) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return false
				}
				let mobile = this.mobile;
				let code = this.code;
				if (!mobile || !code) {
					uni.showToast({
						title: '手机号/验证码必填',
						icon: 'none'
					})
					return false
				}
				let recom_pid = uni.getStorageSync('recom_pid') || '';
				console.log(recom_pid);
				this.$core.post({
					url: 'xiluxc.user/mobilelogin',
					data: {
						pid: recom_pid,
						mobile: mobile,
						code: code
					},
					success: (ret) => {
						let userinfo = ret.data.userinfo;
						that.$core.setUserinfo(userinfo);
						uni.$emit("user_update", {});
						uni.navigateBack({
							delta: 1
						})
					}
				});
			},
			getPhoneNumber(e) {
				var that = this;
				let version = uni.getSystemInfoSync().SDKVersion;

				if (e.detail.errMsg == "getPhoneNumber:ok") {
					if (that.compareVersion(version, '2.21.2') >= 0) {
						that.phoneNumber(that, {
							code: e.detail.code
						})
					} else {
						uni.login({
							provider: 'weixin',
							success: (auth) => {
								that.phoneNumber(that, {
									iv: e.detail.iv,
									encryptedData: e.detail.encryptedData
								})
							},
							fail: () => {
								uni.showToast({
									'title': '微信登录授权失败',
									icon: "none"
								});
							}
						})
					}
				} else {
					console.log("用户点击了拒绝")
				}
			},

			phoneNumber(that, data) {
				console.log(that);
				let wxAccount = that.$core.getCache('wx_account');
				data['third_id'] = wxAccount.third_id;
				let recom_pid = uni.getStorageSync('recom_pid') || '';
				let recom_group = uni.getStorageSync('recom_group') || '';
				if (recom_pid) {
					data['pid'] = recom_pid;
					data['first_group_id'] = recom_group;
				}
				data.avatar = that.avatar;
				data.nickname = that.nickname;
				console.log(data);
				that.$core.post({
					url: 'xilujob.user/wxNumberEncrypted',
					data: data,
					success: (ret, response) => {
						wxAccount['bindind'] = 1;
						let userinfo = ret.data.userinfo;
						console.log('1', userinfo);
						that.$core.setCache('wx_account', wxAccount);
						getApp().globalData.userinfo = userinfo;
						console.log('2', userinfo);
						that.$core.setUserinfo(userinfo);
						that.$chatIM.connectSocket();
						uni.navigateBack({});
						uni.$emit(app.globalData.Events.UserLogin, userinfo);
						uni.showToast({
							title: '登录成功',
						});
					},
					fail: (ret, response) => {
						//失败，重试
						uni.showToast({
							'title': "获取失败",
							icon: "none"
						})
						return false;
					}
				});

			},


			//版本比较
			compareVersion(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}

				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}

				return 0
			}
		}
	}
</script>

<style>
	.head {
		margin-right: 26rpx;
		width: 128rpx;
		height: 128rpx;
		border: 4rpx solid var(--normal);
		border-radius: 50%;
	}

	.authorize_content {
		padding: 120rpx 75rpx;
		box-sizing: border-box;
	}

	.authorize_content .header {
		width: 201rpx;
		height: 201rpx;
		/* border: 6rpx solid #fff; */
		/* box-shadow: 0px 3rpx 8rpx 0px rgba(213, 213, 213, 0.4); */
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}

	.authorize_content .header .tips {
		width: 201rpx;
		height: 201rpx;
		border-radius: 50%;
		color: #D8D8D8;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		left: 0;
		font-size: 36rpx;
		text-align: center;
	}

	.authorize_content .header image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.authorize_content .title {
		font-size: 32rpx;
		color: #333333;
		padding-top: 50rpx;
		margin-top: 40rpx;
		/* border-top: 1rpx solid #EDEDED; */
		text-align: center;
	}

	.authorize_content .info {
		font-size: 28rpx;
		color: #999999;
		padding-top: 30rpx;
		padding-bottom: 70rpx;
		text-align: center;
	}

	.authorize_content button {
		width: 600rpx;
		margin-bottom: 40rpx;
	}

	.container {
		min-height: calc(100vh - env(safe-area-inset-top) - var(--window-bottom) - var(--window-top));
		overflow: hidden;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.btn1 {
		height: 80rpx;
		border-radius: 8rpx;
		text-align: center;
		background-color: var(--normal);
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.btn2 {
		background-color: #D8D8D8;
		color: #FFFFFF;
		height: 80rpx;
		border-radius: 8rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		border: none;
		box-shadow: none;
	}

	.user-rules {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}

	.primary-color {
		color: #0896e0;
	}

	.u-checkbox__label {
		color: #999999 !important;
	}

	.rules {
		margin-top: 20rpx;
	}

	.login-wrap {
		padding: 215rpx 30rpx 30rpx;
	}

	.login-wrap .title {
		margin: 0 0 125rpx 50rpx;
		font-size: 50rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 56rpx;
	}

	.login-box {
		padding: 90rpx 50rpx 50rpx;
		width: 690rpx;
		height: 645rpx;
		background: #ffffff;
		box-shadow: 0 6rpx 29rpx 1rpx rgba(45, 45, 45, 0.14);
		border-radius: 20rpx;
	}

	.input-box {
		padding: 0 50rpx;
		height: 80rpx;
		border: 1rpx solid #cdcdcd;
		border-radius: 40rpx;
	}

	.input-box+.input-box {
		margin-top: 50rpx;
	}

	.input-box image {
		display: block;
		width: 30rpx;
		height: 44rpx;
	}

	.login-box .btn-login {
		margin: 125rpx auto 40rpx;
		width: 590rpx;
		height: 92rpx;
		background: var(--primary);
		border-radius: 8rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 92rpx;
		text-align: center;
	}

	.foot-row image {
		margin: 0 20rpx 0 0;
		display: block;
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
	}


	.agreePop {
		padding: 30rpx 0 0;
		width: 520rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.agreePop .content {
		margin: 0 auto 25rpx;
		padding: 0 30rpx;
		max-height: 500rpx;
		overflow-y: scroll;
	}

	.agreePop .btn {
		height: 90rpx;
		line-height: 90rpx;
	}
</style>